<template>
        <div>
            <!-- <div>商品管理</div> -->
            <el-form ref="form" :model="form" label-width="100px" :inline="true">
                <el-form-item label="商品id">
                    <el-input v-model="form.goodsId" placeholder="请输入商品id" style="width:400px;"></el-input>
                </el-form-item>
               <el-form-item label="打印状态">
                    <el-select v-model="form.print" placeholder="请选择状态">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="未打印" value="0"></el-option>
                    <el-option label="已打印" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="库存状态">
                    <el-select v-model="form.status" placeholder="请选择状态">
                        <el-option label="全部" value=""></el-option>
                        <el-option label="未入库" value="0"></el-option>
                        <el-option label="已入库" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryClick">查询</el-button>
                </el-form-item>
            </el-form>
            <div>
                <el-button type="primary" @click="print">打印</el-button>
                <el-button type="primary" @click="exportClick">导出</el-button>
            </div>
               <el-table 
                    :data="tableData"
                    border
                    width='100%'
                    
                    @selection-change="handleSelectionChange">
                    <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                    <el-table-column
                      prop="createTime"
                      label="生成时间"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="商品名称"
                     >
                    </el-table-column>
                    <el-table-column
                      prop="goodsNo"
                      label="商品编码"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="specInfo"
                      label="生成批号"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="goodsId"
                      label="商品ID"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="print"
                      label="打印状态"
                     >
                     <template slot-scope="scope">
                         <div v-if="scope.row.print == 0">未打印</div>
                         <div v-if="scope.row.print == 1">已打印</div>
                     </template>
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      label="库存状态"
                      >
                      <template slot-scope="scope">
                            <div v-if="scope.row.status == 0">未入库</div>
                            <div v-if="scope.row.status == 1">已入库</div>
                      </template>
                    </el-table-column>
                        
                   
                  </el-table>
                  <div>
                        <!-- <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.current"
                        :page-sizes="[5,10,20,30,40]" 
                        :page-size="page.pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="page.totla">
                      </el-pagination> -->
                      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" 
                      :current-page="page.current" 
                      :page-sizes="[5,10,20,30,40]" 
                      :page-size="page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="page.total">
                      </el-pagination>
                  </div>
                  <el-dialog
                    title="查看原因"
                    :visible.sync="dialogVisible"
                    width="30%"
                   >
                    <span>这是一段信息</span>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                    </span>
                 </el-dialog>
                 <div id="print" style="display:none">
                        <div v-for="(item,index) in multipleSelection" :key="index" style="font-family:'黑体';font-weight:bold;page-break-after:always;">
                          <h3 style="width:100%;font-size: 22px; text-align: center; padding-bottom: 8px;border-bottom: 2px solid #333;">温州古廊桥酒业有限公司</h3>
                          <ul style="padding-left:20px; margin: 8px 0;line-height: 24px;">
                            <li>
                              <span style="display: inline-block;width:80px;margin-right: 15px;">生成时间：</span>
                              <span>{{item.createTime}}</span>
                            </li>
                            <li>
                              <span style="display: inline-block;width:80px;margin-right: 15px;">商品名称</span>
                              <span>{{item.name}}</span>
                            </li>
                            <li>
                              <span style="display: inline-block;width:80px;margin-right: 15px;">商品编码</span>
                              <span>{{item.goodsNo}}</span>
                            </li>
                            <li>
                              <span style="display: inline-block;width:80px;margin-right: 15px;">生成批号</span>
                              <span>{{item.specInfo}}</span>
                            </li>
                            <li>
                                <span style="display: inline-block;width:80px;margin-right: 15px;">商品Id</span>
                                <span>{{item.goodsId}}</span>
                            </li>
                            <!-- <li>
                                <span style="display: inline-block;width:80px;margin-right: 15px;">库存状态</span>
                                <span v-if="item.status == 0">未入库</span>
                                <span v-if="item.status == 1">已入库</span>
                             </li> -->
                          </ul>
                          <div style="width:320px; display: flex; justify-content: space-between;align-items:center;padding:0 10px;">
                            <div style="height:82px;display:flex;flex-direction:column;align-items:center;">
                              <vue-barcode :value="item.goodsId" :options="barcode_option" tag="img" style="width:100%;height:68px"></vue-barcode>
                              <p>{{item.goodsId}}</p>
                            </div>
                            <!-- <vue-qr :text="item.goodsNo" width="80" height="80" :size="80" :margin="0"></vue-qr> -->
                          </div>
                        </div>
                      </div>
            </div>
    </template>
    <script>
    import VueQr from 'vue-qr'
     import VueBarcode from '@xkeshi/vue-barcode';
        import exportExcel from '../../axios/export'
            export default {
              data() {
                return {
                    barcode_option: {
                        displayValue: false, //是否默认显示条形码数据
                        textPosition: 'bottom', //条形码数据显示的位置
                        background: '#fff', //条形码背景颜色
                        valid: function (valid) {
                        },
                        width: '2px',
                        height: '68px',
                        margin: 0,
                        fontSize: '18px' //字体大小
                    },
                  form: {
                    goodsId: '',
                    print: '',
                    status:'',
                    currentPage:1,
                    pageSize:10
                  },
                  page:{
                      current:1,
                      pageSize:10,
                      total:null
                  },
                  tableData: [],
                   
                    dialogVisible:false,
                    imgVisible:false,
                    multipleSelection:[],
                    goodsIdStr:''
                    
                }
              },
              components: {
                    VueBarcode,
                    VueQr,
             },
              methods: {
                async initData(){
                    let {data} = await this.$post({
                        api:'/in/getInComingList',
                        data:this.form,
                       
                    })
                    if(data.code === 0){
                        this.tableData = data.data.list;
                        this.page.pageSize = data.data.pageSize;
                        this.page.current = data.data.pageNum;
                        this.page.total=data.data.total;
                        
                    }
                },
                async exportIdsList(){
                    let {data} = await this.$post({
                        api:'/in/exportIdsList',
                        data:{
                            goodsId:this.goodsIdStr
                        }
                       
                    })
                    if(data.code === 0){
                    //     console.log(url)
                    //     let link = document.createElement("a");
                    //     link.href = url + data.data.replace("static/", "");
                    //     link.download = '商品id';
                    //     link.click();
                    //    console.log(data)
                       let urlstr = url+data.data.replace('static/','');
                       window.location.href=urlstr;
                        // console.log(imgList,'imglist')
                    }
                },
                
                
                handleSizeChange(val) {
                    this.form.pageSize = val;
                    this.initData();
                    // console.log(`每页 ${val} 条`);
                },
                handleCurrentChange(val) {
                    this.form.currentPage = val;
                    this.initData();
                    // console.log(`当前页: ${val}`);
                },
                
                handleSelectionChange(val) {
                   this.multipleSelection = val;
                    let goodsId = []
                    val.forEach(element => {
                        goodsId.push(element.goodsId)
                    });
                    this.goodsIdStr = goodsId.join(',');
                    // this.form.goodsId = goodsId.join(',')
                    console.log(goodsId.join(','))
                    // this.multipleSelection = val;
                },
                queryClick(){
                    this.initData();
                },
                //导出
                exportClick(){
                    if(!this.multipleSelection.length){
                        return this.$message.error('请先勾选打印项');
                    }
                    this.$confirm('确认导出？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    this.exportIdsList();
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });          
                    });
                },
                print(){
                    if(!this.multipleSelection.length){
                        return this.$message.error('请先勾选打印项');
                    }
                    let subOutputRankPrint = document.getElementById('print');
                    let newContent = subOutputRankPrint.innerHTML;
                    let oldContent = document.body.innerHTML;
                    document.body.innerHTML = newContent;
                    window.print();
                    this.updatePrintGoods();
                    window.location.reload();
                    document.body.innerHTML = oldContent;
                    
                    return false;
                },
                async updatePrintGoods(){
                    let {data} = await this.$post({
                        api:'/api/goods/updatePrintGoods',
                        data:{
                            goodsId:this.goodsIdStr
                        }
                        
                       
                    })
                    if(data.code === 0){
                        console.log(92378914)
                        this.initData();
                    }
                },
              },
              mounted () {
                  this.initData();
              }
            }
          </script>